

<template>
  <div class="lgbox">
    <van-form ref="form" >
      <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' },{pattern:reg.phone,message:'请输入正确的手机号'}]"
            center
            clearable
            left-icon="phone-o"
          />
        <CaptchaBtn
          v-model="form.captcha"
          :phone="form.phone"

        ></CaptchaBtn>
        <slot name="pwd" :form="form"></slot>
        <div style="margin: 16px;" class="btns">
          <van-button  round  :type="!flag?'primary':'info'" native-type="button" @click="todoLogin">{{ flag?'确认找回':'验证登录' }}</van-button>
          <van-button  round  type="danger" native-type="button" @click="resetData">重置</van-button>
        </div>
        <div style="margin: 16px;">
         <div class="links">
           <router-link class="aitem aleft" to="/reg">注册</router-link>
           <router-link class="aitem aright" :to="{path:flag?'/login':'/findpass'}" >{{ flag?'登录':'找回密码' }}</router-link>
         </div>
        </div>
      </van-form>
  </div>
</template>


<script>
import { checkCaptcha , gettokenApi , todochangepass   } from '@/api/api';

export default {
  data(){
    return {
      form:{ }
    }
  },
  props:{
    flag:Boolean,  // 默认是false 手机登录  true 找回密码
  },
  methods:{
    resetData(){
      console.log(this.$refs.form)
      this.form = {};
    },
    todoLogin(){
      // this.$refs.form.submit()
      this.$refs.form.validate()
      .then( async (value)=>{
        console.log(value)
        let res = await checkCaptcha(this.form).catch(err=>{
          this.ShowError("验证码错误")
        })
        if(res.code==200 && res.data){
          if(this.flag){
            // 找回密码
            let res = await todochangepass({
              phone:this.form.phone,
              password:this.form.password, // 新密码
            })

            if(res.code==200){
              this.ShowSuccess('密码设置成功,请重新登录')
              sessionStorage.setItem('token',null)
              this.$router.push('/login')

            }
          }else{
            // 开始登录 获取token
            let res = await gettokenApi({
              phone:this.form.phone,
              code:this.form.captcha,
            })
            if(res.code==200){
              this.$nextTick(()=>{
                this.ShowSuccess('登录成功')
                sessionStorage.setItem('token',res.token)
                localStorage.setItem("appPhone",this.form.phone)
                this.$router.push('/ms/mine')
              })
            }
          }

        }
      })
      .catch(err=>{
        console.log(err)
        this.ShowError("校验失败")
      })
    }
  },
  mounted(){
    if(this.$route.query.phone){
      this.$set(this.form,'phone',this.$route.query.phone)
    }else{
      this.$set(this.form,'phone',localStorage.getItem('appPhone'))
    }
  }
}
</script>


<style lang="scss" scoped>
.lgbox{
margin-top:20px;
.btns{
  display: flex;

  .van-button{
    flex:1;
    margin:0 10px;
  }
}
}
.links{
margin-top:15px;
.aitem{
  color:#000;
}
.aleft{
  color:orange;
}
.aright{
  color:#999;
}
}
</style>
